<template>
  <a-modal
    :open="open"
    :title="title"
    :confirm-loading="loading"
    :ok-text="$t('common.submit')"
    :cancel-text="$t('common.cancel')"
    @ok="handleSubmit"
    @cancel="updateOpen(false)"
  >
    <a-form
      ref="formRef"
      :model="form"
      :rules="formRules"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 18 }"
    >
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item name="roleName" :label="$t('role.name')">
            <a-input
              v-model:value="form.roleName"
              :placeholder="$t('role.namePlaceholder')"
              :disabled="formMode === 'edit'"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item name="roleCode" :label="$t('role.code')">
            <a-input
              v-model:value="form.roleCode"
              :placeholder="$t('role.codePlaceholder')"
              :disabled="formMode === 'edit'"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item name="roleSort" :label="$t('role.sort')">
            <a-input-number
              v-model:value="form.roleSort"
              :min="1"
              :max="999"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item name="status" :label="$t('role.status')">
            <a-switch
              v-model:checked="form.status"
              :checked-value="1"
              :unchecked-value="0"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item name="remark" :label="$t('common.remark')">
            <a-textarea
              v-model:value="form.remark"
              :placeholder="$t('common.remarkPlaceholder')"
              :rows="4"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import type { FormInstance } from 'ant-design-vue'
import type { CreateRole, UpdateRole } from '@/types/api/system/role'
import { useRoleFormRules } from '../config/formRules'

defineOptions({
  name: 'RoleFormModal'
})

// 类型定义
type FormMode = 'add' | 'edit'
type RoleForm = CreateRole | UpdateRole

// Props定义
const props = withDefaults(defineProps<{
  open: boolean
  formMode: FormMode
  form: RoleForm
  title: string
  loading?: boolean
}>(), {
  loading: false
})

// Emits定义
const emit = defineEmits<{
  (e: 'update:open', value: boolean): void
  (e: 'submit'): void
}>()

// 表单实例
const formRef = ref<FormInstance>()

// 表单验证规则
const formRules = useRoleFormRules()

// 更新open状态
const updateOpen = (value: boolean) => {
  emit('update:open', value)
}

// 提交表单
const handleSubmit = async () => {
  try {
    await formRef.value?.validate()
    emit('submit')
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

// 监听弹窗关闭
watch(() => props.open, (val) => {
  if (!val) {
    formRef.value?.resetFields()
  }
})

// 导出表单实例
defineExpose({
  formRef
})
</script> 